<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标拖拽</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #dd{
            width: 120px;
            height: 120px;
            background: #00ff00;
            position: absolute;
        }
    </style>
    <script>
        var dd;
        var mflag=false;
        function ondown() {
            dd=document.getElementById('dd');
            mflag=true;
        }
        function onmove(e) {
            if(mflag) {
                dd.style.left=e.clientX-60+"px";
                dd.style.top=e.clientY-60+"px";
            }
        }
        function onup() {
            mflag=false
        }
    </script>
</head>
<body onmousemove="onmove(event)">
    <!-- 放在body上是为了鼠标快速移动是不会脱离div -->
    <div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"></div>
</body>
</html>